refactor(ui): co-locate component styles and split Deck and Panel out of the full player - #472

Why

The v3 view grew in three places that are hard to read. PodcastView.svelte carried about 1,300 lines of page and component CSS in one global block. Player.svelte was 916 lines. The verify skill's screens.mjs passed 1,100 lines. This PR restructures them so each component owns its styles. Every screen stays pixel-identical, apart from three small fixes and one keyboard addition.

What changed

• Each component co-locates its styles, anchored on its own root class with the .root :global {} pattern the shell already used. The shell keeps its tokens, its layout, the rules Obsidian's DOM needs, and the classes several components share (PodcastView.svelte 1,552 → 739 lines).
• Player.svelte (916 → 530 lines) hands the title, scrubber, transport and capture bar to Deck.svelte. ChaptersPanel and UpNextPanel share their chrome through Panel.svelte. The headset's Next in queue moves from bindMediaSession into PlayerController.playNext.
• screens.mjs (1,128 → 189 lines) splits into screens/instance.mjs, screens/scenes.mjs and screens/sheet.mjs, verbatim apart from imports and paths. The ignored FeedRepository cache option and its 8 frozen test callers are gone.

Behavior changes:

• The wide player's Chapters and Up next tabs follow the ARIA tabs pattern: Left and Right move and wrap, Home and End jump, and only the selected tab is in the Tab order.
• The fullscreen button hides while its video frame is fullscreen, where it did nothing. Escape leaves fullscreen and, as before, also collapses the full player.
• The play button presses without its 120 ms transition when the system asks for reduced motion.
• After an import whose final save fails, the Notice says PodNotes saves the settings once it can, instead of asking the user to change a setting (fix(persistence): recover transient save refusals without edits #470 made recovery automatic).

Scope

• Covers the structure and the four changes above. Phone, accessibility and copy polish is UI4b's.
• Leaves docs/scripts/screenshots.mjs alone. It drives the v2 UI, and the release docs pass rewrites it.

Where a component styles a child's markup

Each case is one the parent's layout decides:

• EpisodeRow, AddPodcastPage (results), LibraryPage (grid cards) and EpisodesPage (hero) size the Cover they place.
• Panel centers the empty state its list shows.
• Player styles the <video> element that player.videoStage inserts.
• The shell places SearchField in its head and lets a page's nav list bleed into the page padding.

Queue rows are an EpisodeRow variant (queue, dragging) instead of rules in QueueList.

Tradeoffs

• Svelte's per-element scoping was tried first. It cost 1,255 gzip bytes for no visible change, so the coordinator chose root-anchored blocks.
• A rule that varies a shared class, such as .pn-iconbtn.pn-grip, now carries a button type selector. It wins by specificity instead of stylesheet order, and still loses to the shared :hover.
• Each button keeps its master specificity against Obsidian's touch rule button:not(.clickable-icon).mobile-tap. The mini player's open button and the rail's add-podcast button stay plain scoped rules, so they still show Obsidian's tap fill as before. svelte:element would have merged Panel's two branches but costs 1.9K gzip.

Blast radius

The whole PodNotes view restyles through new selectors. A cascade mistake would show as a wrong size, color or hover state. The pixel and computed-style comparisons below cover every captured state, at rest, under hover, active and focus, and under Obsidian's touch class. main.js gzip goes from 98,345 to 98,906 bytes (+561, under the 100,000 gate).

Verification

• Pixel diff, master vs head, 136 shots (23 states × sidebar 320, pane 820, phone 390 × light, dark): 133 identical. The 3 that differ are capture noise. One is a video frame (12 px), which also differs between two master runs. The others are the two phone Up next states (40 and 42 px), where the deck sits at a fractional offset that is the same on both builds (398.40625 px); master recaptured in the same session differs from its own baseline there by 49 and 51 px. The split screens.mjs captures the same shots as the old one on the same bundle.
• Computed styles of every element in the view, at rest, with :hover, :active and :focus-visible forced, and with Obsidian's touch class mobile-tap on every tappable element, master vs head: all 68 state-widths identical. The search results' new wrapper is folded out of the element paths for that comparison. In the now-playing sidebar state, one master snapshot caught master's capture buttons at the shared .pn-btn height (30 px instead of 36 px): master's .pn-player .pn-cap ties .pn-btn and wins only by stylesheet order, and button.pn-cap no longer depends on it. A settled master snapshot of that state matches.
• Real Obsidian 1.14.4 with real key events, master then head: the tabs ignore arrow keys on master and move on head; under reduced motion the play transition is transform 0.12s on master and none on head; in fullscreen the button shows (32 × 32) on master and is hidden on head.
• npm run lint, format:check, typecheck, build, test (2,549 passed), test:tooling (13 passed), docs:build, and test:e2e on a fresh vault (176 of 176 passed), all on Node 22.23.2.

Mutations

Each wrong alternative below fails the named test:

Docs at release

• Keyboard: in the wide full player, Left and Right move between Chapters and Up next, and Home and End go to the first and last.
• The full player's fullscreen button hides while fullscreen. Escape leaves fullscreen.

Fullscreen on master (left) and on this branch (right), in Obsidian 1.14.4: